<template>
  <div class="purchasenotes">
    <!-- <el-upload
      class="upload-demo"
      action
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :file-list="fileListUpload"
      :limit="limitUpload"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
    </el-upload> -->
    <div class="purchsingfromtop">
      <div class="content_purchsingfromtop">
        <div class="purchsingfromtop_name">采购单号：</div>
        <el-input v-model="serach.order_no" placeholder="请输入内容" />
      </div>
      <div class="content_purchsingfromtop">
        <div class="purchsingfromtop_name">商品名称：</div>
        <el-input v-model="serach.product_name" placeholder="请输入内容" />
      </div>
      <!-- <div class="content_purchsingfromtop">
        <div class="purchsingfromtop_name">计划收货：</div>
        <el-date-picker
          style="width: 220px"
          v-model="delivery_date"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          type="daterange"
        />
      </div> -->
      <div class="advanced_inquire">
        <div style="margin-right: 10px">
          <el-button
            v-show="isinquirebtn"
            @click="getLists()"
            style="margin-left: 20px; margin-top: 2px"
            type="primary"
          >
            查询
          </el-button>
        </div>
        <div>
          <el-button @click="chongzhi">重置</el-button>
        </div>
        <!-- <div style="text-align: right; width: 40%" @click="showadvancedfilter">
          <el-link type="primary" :underline="false">
            <span v-show="!isinquirebtn">收起</span>
            高级筛选
            <i ref="rotate" class="el-icon-arrow-down"></i>
          </el-link>
        </div> -->
      </div>
      <!-- <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">采购类型：</div>
        <el-select v-model="serach.type" placeholder="请选择">
          <el-option
            v-for="item in sclx"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">负责人：</div>
        <el-input v-model="serach.charge_name" placeholder="请输入内容" />
      </div>
      <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">创建日期：</div>
        <el-date-picker
          v-model="create_date"
          value-format="timestamp"
          end-placeholder="结束月份"
          start-placeholder="开始月份"
          type="daterange"
        />
      </div> -->
      <!-- <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">库房名称：</div>
        <el-select v-model="serach.warehouse_id" placeholder="请选择">
          <el-option
            v-for="(item, i) in ckmz"
            :key="i"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div> -->
      <!-- <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">采购状态：</div>
        <el-select v-model="cgztxz" placeholder="请选择">
          <el-option v-for="item in cgzt" :key="item" :label="item" :value="item" />
        </el-select>
      </div> -->
      <!-- <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">供货确认：</div>
        <el-input v-model="input" placeholder="请输入内容" />
      </div> -->
      <!-- <div v-show="!isinquirebtn">
        <div class="purchsingfromtop_name">单据来源：</div>
        <el-input v-model="input" placeholder="请输入内容" />
      </div> -->
    </div>
    <div v-show="!isinquirebtn">
      <el-button style="margin-left: 105px" @click="getLists()" type="primary">
        查询
      </el-button>
      <el-button @click="chongzhi">重置</el-button>
    </div>
    <div class="tablebtn">
      <!-- <el-button plain type="primary" @click="addpage">新增</el-button> -->
      <!-- <el-button plain>批量导入</el-button>
      <el-button plain>批量导出</el-button> -->
    </div>
    <div ref="isSwitch" v-show="isSwitch">
      <!-- 筛选代码 -->
      <!-- aaa为函数 -->
      <tablescreen
        style="position: absolute; z-index: 999; margin-top: 40px"
        :checked="tabletopoptionallist"
        :checks="tableAlllist"
        :dis="tabletopdisabledllist"
        @gettabletop="aaa"
      />
    </div>
    <el-table
      class="bcd"
      max-height="560"
      :data="tableData"
      v-show="isRouterAlive"
    >
      <el-table-column fixed width="20">
        <!-- <template slot="header">
          <i class="el-icon-s-operation" @click="isselect" slot="reference"></i>
        </template> -->
      </el-table-column>
      <!-- <el-table-column fixed type="selection"  /> -->
      <el-table-column fixed label="采购单号" prop="no" width="200px" />
      <!-- <el-table-column fixed label="采购单号" prop="no" width="190">
        <template slot-scope="scope">
          <span class="no_Code" @click="detailsfunc(scope.row)">
            {{ scope.row.no }}
          </span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="创建人" prop="cuser" width="120" /> -->
      <el-table-column label="创建日期" prop="ctime">
        <template slot-scope="scope">
          {{ scope.row.ctime | formatDate }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="采购类型" prop="type" width="120" /> -->
      <!-- <el-table-column label="供应商/采购员" width="120">
        <template slot-scope="scope">
          <div v-show="scope.row.purchaser_name">
            {{ scope.row.purchaser_name }}
          </div>
          <div else>{{ scope.row.supplier_name }}</div>
        </template>
      </el-table-column> -->
      <el-table-column label="订单号" prop="order_no" width="200">
        <!-- <template slot-scope="scope"> -->
        <!-- 状态这里可以改 -->
        <!-- {{ scope.row.status | stateTransition }} -->
        <!-- </template> -->
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- 状态这里可以改 -->
          {{ scope.row.status | stateTransition }}
        </template>
      </el-table-column>
      <el-table-column v-bind:label="'总价(元)'" prop="shelf_total">
        <template slot-scope="scope">
          {{ scope.row.shelf_total | filterMoney }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="计划收货日期" prop="expect_time" /> -->
      <!-- <el-table-column label="最后更新时间" prop="utime" width="120" />
      <el-table-column label="最后更新人" prop="uuser" width="120" /> -->
      <el-table-column label="备注" width="170">
        <template slot-scope="scope">
          <!-- <div v-if="scope.row.status == 8">供应商缺货</div>
            <div v-else>{{scope.row.remarks}}</div> -->
          <div>{{ scope.row.remarks }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" prop="zip">
        <template slot-scope="scope">
          <div style="display: flex">
            <!-- <div> -->
            <!-- <el-popconfirm
                v-show="scope.row.status == 1"
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                @confirm="confirmOrder(scope.row.id)"
                title="确定确认吗？"
              >
                <el-button
                  slot="reference"
                  v-show="scope.row.status == 1"
                  style="margin-right: 2px"
                  type="text"
                  size="small"
                >
                  确认
                </el-button>
              </el-popconfirm> -->
            <!-- <el-button
                @click="showDialog(scope.row.id)"
                v-show="scope.row.status == 2"
                style="margin-right: 2px"
                type="text"
                size="small"
              >
                收货
              </el-button> -->
            <!-- </div> -->

            <div>
              <el-button
                style="margin-right: 2px"
                @click.native.prevent="go(scope.row)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
            </div>
            <!-- <el-popconfirm
              v-show="scope.row.status == 1"
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              @confirm="confirmCancelOrder(scope.row)"
              title="确定取消吗？"
            >
              <el-button
                slot="reference"
                style="margin-right: 2px"
                type="text"
                size="small"
              >
                取消
              </el-button>
            </el-popconfirm> -->
            <!-- <div style="margin-top: 4px">
              <el-dropdown>
                <span
                  class="el-dropdown-link"
                  style="font-size: 12px; cursor: pointer; color: #1890ff"
                >
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>复制</el-dropdown-item>
                  <el-dropdown-item>
                    <div>打印</div>
                  </el-dropdown-item>
                  <el-dropdown-item>批量导出</el-dropdown-item>
                  <el-dropdown-item v-show="scope.row.status == 1">
                    <div @click="closeOrder(scope.row.id)">关闭</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div> -->
            <!-- purchasenotedetails -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage4"
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="1"
      :page-sizes="[10, 20, 30, 40]"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog title="收货地址" :visible.sync="showDoneOrderDialog">
      <el-form :model="form">
        <el-form-item label="入库单号" label-width="200">
          <el-input
            v-model="form.recieveNo"
            placeholder="请填定入库单号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="入库日期" label-width="200">
          <el-input
            v-model="form.recieveDate"
            placeholder="请填定入库日期"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDoneOrderDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitDoneOrderDialog">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  setorderedit,
  doneOrder,
  confirmOrder,
  closeOrder,
  cancelOrder,
  salesLists,
} from '@/api/purchase/purchasenote.js'
import { getWarehouseQuery, getapi } from '@/api/warehouse.js'
// import
import tablescreen from '@/components/tabletop/tabletopscreen.vue'
export default {
  components: {
    tablescreen,
  },
  data() {
    return {
      serach: {
        from_delivery_date: '', //查询开始计划收货时间 2020-11-22
        to_delivery_date: '', //查询结束计划收货时间
        from_create_date: '', //开始创建时间，十位时间戳
        to_create_date: '', //结束创建时间，十位时间戳
        order_no: '', //采购单号，模糊查询   3
        product_name: '', // 采购商品名称，模糊查询
        warehouse_id: '', //仓库id     1
        type: '', //采购类型
        warehouse_name: '', //仓库名称，模糊查询
        charge_name: '', //负责人名称
      },
      delivery_date: '', //查询计划时间总共
      create_date: '', //查询创建时间总共
      showDoneOrderDialog: false,
      sclx: ['市场自采', '供应商直供'], //市场类型
      form: {
        id: null,
        recieveNo: '',
        recieveDate: this.getNowFormatDate(),
      },
      isRouterAlive: true,
      isSwitch: false,
      cgzt: ['待确认', '待收货', '已收货', '已完成'],
      cgztxz: '',
      ckmz: '',
      value1: '',
      tabletopoptionallist: false,
      tabletopdisabledllist: false,
      input: '',
      tableAlllist: '',
      total: 0, //表格总数
      pagesize: 10, //当前每页显示条数
      isinquirebtn: true,
      currentPage4: 1, //当前页数
      tableData: [], //显示的数据
    }
  },
  async created() {
    let cglxlist = await getapi({ dict_code: 'purchaseType' })
    let list = []
    cglxlist.data.records.forEach((item) => {
      list.push(item.value)
    })
    this.sclx = list

    await this.getLists()
    let res = await getWarehouseQuery({})
    this.ckmz = res.data.list
  },
  watch: {
    delivery_date(val, oldval) {
      if (val) {
        this.serach.from_delivery_date = val[0]
        this.serach.to_delivery_date = val[1]
      } else {
        this.serach.from_delivery_date = ''
        this.serach.to_delivery_date = ''
      }
    },
    create_date(val, oldval) {
      if (val) {
        this.serach.from_create_date = val[0] / 1000
        this.serach.to_create_date = val[1] / 1000
      } else {
        this.serach.from_create_date = ''
        this.serach.to_create_date = ''
      }
    },
  },
  filters: {
    filterMoney(num) {
      return (num / 100).toFixed(2)
    },
    stateTransition(val) {
      if(val == 0){
        return '已取消'
      }else if (val == 1) {
        return '待确认'
      } else if (val == 2) {
        return '待发货'
      } else if (val == 3) {
        return '待收货'
      } else if (val == 4) {
        return '部分发货'
      }else if (val == 5) {
        return '待付款'
      }else if (val == 6){
        return '已完成'
      }else if (val == 7){
        return '退货'
      }
       else {
        return val
      }
      // if (val == 1) {
      //   return '待确认'
      // } else if (val == 2) {
      //   return '待发货'
      // } else if (val == 3) {
      //   return '已发货'
      // } else if (val == 4) {
      //   return '已收货'
      // } else if (val == 5) {
      //   return '退货'
      // } else if (val == 6) {
      //   return '已取消'
      // } else if (val == 7) {
      //   return '部分取消'
      // } else if (val == 8) {
      //   return '部分发货'
      // } else {
      //   return val
      // }
    },
    formatDate(date) {
      var date = new Date(date * 1000)
      var YY = date.getFullYear() + '-'
      var MM =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hh =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var ss =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return YY + MM + DD
    },
  },
  computed: {},
  methods: {
    go(e) {
      this.$router.push({path:`/purchase/purchasenoteEdit/${e.id}`,query:{ShowStatus:e.status}})
      sessionStorage.setItem('procurement', JSON.stringify(e))
    },
    async confirmCancelOrder(data) {
      let temporaryValue = {
        id: data.id,
        status: 6,
      }
      const res = await cancelOrder(temporaryValue)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '操作成功',
        })
      } else {
        this.$message({
          type: 'error',
          message: '操作失败',
        })
      }
      this.getLists()
    },
    chongzhi() {
      let this_ = this
      this.delivery_date = ''
      this.create_date = ''
      for (let item in this.serach) {
        this.serach[item] = ''
      }
      this.getLists()
    },
    async getLists() {
      let res = await getList(this.pagesize, this.currentPage4, this.serach)
      this.total = res.total
      this.tableData = res.list
    },
    // 跳到新增页面
    addpage() {
      // this.$router.push('/')
      this.$router.push('/purchase/purchasenoteAdd')
    },
    detailsfunc(val) {
      this.$router.push('/purchase/purchasenotedetails/' + val.id)
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    isselect(e) {
      this.isSwitch = !this.isSwitch
      // alert(11)
    },
    aaa(val) {
      if (val !== '取消') {
        this.tabletopoptionallist = val
      }
      this.reload()
      this.isSwitch = false
    },
    // 页面显示条数发生改变则调用这
    async handleSizeChange(val) {
      this.pagesize = val
      let res = await getList(this.pagesize, this.currentPage4, this.serach)
      this.total = res.total
      this.tableData = res.list
    },
    // 页面页码发生改变则回调这个
    async handleCurrentChange(val) {
      this.currentPage4 = val
      let res = await getList(this.pagesize, this.currentPage4, this.serach)
      this.total = res.total
      this.tableData = res.list
    },
    showadvancedfilter() {
      if (this.isinquirebtn) {
        this.$refs.rotate.style.transform = 'rotate(180deg)'
        this.isinquirebtn = false
      } else {
        this.$refs.rotate.style.transform = 'rotate(0deg)'
        this.isinquirebtn = true
      }
    },
    async confirmOrder(val) {
      let data = {
        id: val,
      }
      let res = await confirmOrder(data)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '操作成功',
        })
      } else {
        this.$message({
          type: 'error',
          message: '操作失败',
        })
      }
      await this.getLists()
    },
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    showDialog(val) {
      this.form.id = val
      this.showDoneOrderDialog = true
    },
    async submitDoneOrderDialog() {
      this.showDoneOrderDialog = false
      let res = await doneOrder(this.form)
      if (!this.form.recieveNo || !this.form.recieveDate) {
        this.$message({
          type: 'error',
          message: '请填写收货信息',
        })
        return false
      }
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '操作成功',
        })
      } else {
        this.$message({
          type: 'error',
          message: '操作失败',
        })
      }
      await this.getList()
    },
    async closeOrder(val) {
      let data = {
        id: val,
      }
      let res = await closeOrder(data)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '操作成功',
        })
      } else {
        this.$message({
          type: 'error',
          message: '操作失败',
        })
      }
      await this.getList()
    },
  },
}
</script>

<style>
/* .el-table .cell{
  white-space:pre-line;
} */
.no_Code {
  color: #1890ff;
  cursor: pointer;
}

.purchasenotes .cell {
  text-align: center;
}

.purchasenotes .tablebtn {
  line-height: 60px;
}

.purchasenotes .purchsingfromtop {
  display: flex;
  flex-wrap: wrap;
}

.purchasenotes .purchsingfromtop div {
  margin-bottom: 5px;
}

.purchasenotes .el-input.el-input--small.el-input--suffix {
  width: 100%;
}

.purchasenotes .advanced_inquire {
  display: flex;

  align-items: center;
  /* justify-content: space-between; */
}

.purchasenotes .advanced_inquire div:last-child {
  width: 50%;
}

.purchasenotes .purchsingfromtop_name {
  display: inline-block;
  line-height: 100%;
  text-align: right;
  white-space: nowrap;
}

.purchasenotes .el-icon-arrow-down {
  transition: 0.25s;
}

.content_purchsingfromtop {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
</style>
